<template>
	<view class="function_list">
		<view class="list">
			<view class="drop" v-for="(item,index) in list" :key="index">
				<span @click="gotoPage(index)">{{item.name}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'person_list',
		data() {
			return {
				list: [{
						name: "我的收藏"
					}, {
						name: "咨询记录"
					}, {
						name: "测评记录"
					},
					{
						name: "关于我们"
					}, {
						name: "助理选项"
					}
				]
			}
		},
		methods: {
			gotoPage(e) {
				console.log(e)
				switch (e) {
					case 0: {
						uni.navigateTo({
							url: '/pages/myfavorite/myfavorite',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break
					}
					case 1: {
						uni.navigateTo({
							url: '/pages/myrecord/myrecord',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break
					}
					case 2: {
						uni.navigateTo({
							url: '/pages/surveryrecord/surveryrecord',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break
					}
					case 3: {
				       alert("还在开发中！")
						break
					}
					case 4: {
					  alert("还在开发中！")
						break
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.function_list {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 65rpx;

		.list {
			width: 85%;
			position: relative;
			min-height: 100rpx;
			border: 2px #baccd9 solid;
			box-shadow: 1px 2px 1px 1px #baccd9;
			border-radius: 10px;
			transition: all .3s;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			&::before,
			&::after {
				content: "";
				position: absolute;
				top: -10px;
				left: -10px;
				right: -10px;
				bottom: -10px;
				border: 2px solid #8fb2c9;
				transition: all .5s;
				animation: clippath 10s infinite linear;
				border-radius: 10px;
			}

			&::after {
				animation: clippath 10s infinite -5s linear;
			}

			@keyframes clippath {

				0%,
				100% {
					clip-path: inset(0 0 98% 0);
				}

				25% {
					clip-path: inset(0 98% 0 0);
				}

				50% {
					clip-path: inset(98% 0 0 0);
				}

				75% {
					clip-path: inset(0 0 0 98%);
				}
			}

			.drop {
				position: relative;
				width: 100rpx;
				height: 100rpx;
				display: flex;
				margin: 20rpx 20rpx;
				justify-content: center;
				align-items: center;
				text-align: center;
				overflow: hidden;
				box-shadow: inset 10px 10px 10px rgba(023, 129, 181, .09),
					15px 25px 10px rgba(255, 255, 255, .05), 15px 20px 20px rgba(023, 129, 181, .09),
					inset -10px -10px 15px rgba(255, 255, 255, .9);
				border-radius: 50%;
				animation: move 3s 0s infinite;
				-webkit-animation: move 3s 0s infinite;
				transform-origin: bottom;
				-webkit-transform-origin: bottom;

				@keyframes move {

					0%,
					65% {
						-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
					}

					70% {
						-webkit-transform: rotate(6deg);
						transform: rotate(6deg);
					}

					75% {
						-webkit-transform: rotate(-6deg);
						transform: rotate(-6deg);
					}

					80% {
						-webkit-transform: rotate(6deg);
						transform: rotate(6deg);
					}

					85% {
						-webkit-transform: rotate(-6deg);
						transform: rotate(-6deg);
					}

					90% {
						-webkit-transform: rotate(6deg);
						transform: rotate(6deg);
					}

					95% {
						-webkit-transform: rotate(-6deg);
						transform: rotate(-6deg);
					}

					100% {
						-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
					}
				}

				@-webkit-keyframes move {

					0%,
					65% {
						-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
					}

					70% {
						-webkit-transform: rotate(6deg);
						transform: rotate(6deg);
					}

					75% {
						-webkit-transform: rotate(-6deg);
						transform: rotate(-6deg);
					}

					80% {
						-webkit-transform: rotate(6deg);
						transform: rotate(6deg);
					}

					85% {
						-webkit-transform: rotate(-6deg);
						transform: rotate(-6deg);
					}

					90% {
						-webkit-transform: rotate(6deg);
						transform: rotate(6deg);
					}

					95% {
						-webkit-transform: rotate(-6deg);
						transform: rotate(-6deg);
					}

					100% {
						-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
					}
				}

			}
		}
	}
</style>
